<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单元素</title>
	</head>
	<body>
		<!-- 表单：采集用户信息，并提交到服务器 
		     表单元素：form
		     input控件元素：采集用户信息的元素
			 必须type类型属性    属性值    text          文本框
			                             password      密文 文本框
										 submit        提交     form表单控制
										 button        按钮 结合JS、value【html4】
										 reset         重置    form表单控制
										 color         颜色控件
										 datetime-local本地日历控件
										 date          年月日插件
										 time          时间插件
										 week          周插件
										 range         滑块
										 file          上传文件
										 radio         单选框  结合name属性 
										 checkbox      复选框
									--	 checkd 默认选择【单复选框】
									     image        图片按钮 结合src属性
										 hidden       隐藏 结合 JS
		-->
		<h1>登录页面</h1>
		<form>
			<h4>表单元素：控件元素</h4>
		账号：<input type="text"> <br><br>
		<input >
		密码：<input type="password"><br><br>
		<input type="submit" />
		<input type="button" value="自定义按钮"/>
		<!-- html5写法 结合JS-->
		<button>触发按钮</button>
		<input type="reset" /> <br><br>
		<input type="color" />
		<input type="datetime-local" />
		<input type="date" />
		<input type="time" />
		<input type="week" />
		<input type="range" />
		<input type="file" /><br><br>
		男 <input type="radio" name="sex" checked="checked"/>
		女 <input type="radio" name="sex"/>
		<input type="checkbox" />红烧肉
		<input type="checkbox" checked/>佛跳墙
		<input type="checkbox" />小鸡炖蘑菇
		<input type="image" src="img/1.png"/>
		<input type="hidden" />
		<h4>表单元素：多行文本元素  cols行属性   rows列属性 </h4>
		建议: <textarea cols="20" rows="10"></textarea>
		<h4>表单元素：下拉列表：范围内的数据 </h4>
		<!-- 层级元素 快捷键：select>option -->
		发车时间:<select>
			<option>00:00--24:00</option>
			<option>00:00--06:00</option>
			<option>06:00--12:00</option>
			<option>12:00--18:00</option>
			<option>18:00--24:00</option>
		       </select>
		<h4>表单元素：细节元素 </h4>
		<!-- 层级元素 快捷键：details>summary+div -->	 
		  <details>
		  	<summary>征婚启示</summary>
		  	<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim nesciunt quisquam quas, tempore, suscipit exercitationem consequuntur aliquam accusantium illum consectetur, eos totam. Quis dolor repudiandae repellendus nesciunt a. Voluptas, non? Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse quisquam eum iure iste possimus accusantium placeat cumque, doloribus exercitationem eos quam quaerat reprehenderit obcaecati voluptatem fuga expedita maxime eveniet. Cupiditate! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum hic architecto tempore ipsam aliquam modi, libero ratione incidunt quasi, repellat praesentium. Enim voluptatibus ipsa architecto numquam velit dolor optio laudantium. Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque nihil natus sit corporis, unde praesentium? Ea assumenda excepturi facere esse labore, deserunt quos? Nobis inventore quo, dolor doloribus quis minima?</div>
		  </details>
		</form>
		<h1>新元素</h1>
		<!-- 记号笔元素 -->
		周五<mark>放假啦</mark>
		<!-- 度量元素 必须属性 value="0~1默认值" min属性  max属性-->
		电量:<meter value="80" min="0"  max="100"></meter>
	</body>
</html>